<template>
  <div class="stockDetails">

    <el-card class="box-card">
      <!--<div slot="header" class="clearfix">-->
      <h4 class="textItem">
        客户信息
        <el-button class="backBtn" @click="backBtn" type="primary" size="mini">返回</el-button>
      </h4>
      <!--</div>-->
      <div class="info-item">
        <div>
          <span class="tipText">客户ID : </span><span>{{costomer.customerName}}</span>
        </div>
        <div>
          <span class="tipText">所属公司 : </span><span>{{!!costomer.companyName ? costomer.companyName : '-' }}</span>
        </div>
      </div>
      <div class="info-item">
        <div>
          <span class="tipText">行业 : </span><span>{{costomer.industryName}}</span>
        </div>
        <div>
          <span class="tipText">号码归属地 : </span>
          <span>{{costomer.provinceName + ( !costomer.cityName || costomer.cityName === '' ? '' :  '/' + costomer.cityName )}}</span>
        </div>
      </div>
      <div class="info-item">
        <div>
          <span class="tipText">当前虚拟号 : </span><span>{{costomer.virtualNumber}}</span>
        </div>
        <div>
          <span class="tipText">有效时间 : </span><span>{{costomer.lifeTime}}</span>
        </div>
        <div>
          <span class="tipText">导入时间 : </span><span>{{costomer.insertTime}}</span>
        </div>
      </div>
      <div class="info-item">
        <div>
          <span class="tipText">关键词 : </span>
          <span v-if="!!costomer.keyword">
            <el-tag  style="margin-right:5px" v-for=" (item ,index) in costomer.keyword.split(',')" :key="index" :type="indexColor(index)">
              {{item}}
            </el-tag>
          </span>
          <el-tag v-else>暂无</el-tag>
        </div>
      </div>
      <div class="info-item">
        <div>
          <span class="tipText">系统标签 : </span>
          <span v-if="!!costomer.sysLabel">
            <el-tag style="margin-right:5px" v-for="(item ,index) in costomer.sysLabel.split(',')" :key="index" :type="indexColor(index)">
              {{item}}
            </el-tag>
          </span>
          <el-tag v-else>暂无</el-tag>
        </div>
      </div>
    </el-card>
    <h4>呼叫历史</h4>
    <el-table empty-text="暂无任何用户信息" :data="list" v-loading.body="listLoading" border fit>
        <el-table-column width="150" align="center" label="呼叫客户" >
          <template slot-scope="scope">
            <span>{{scope.row.serviceName}}</span>
          </template>
        </el-table-column>
        <el-table-column width="80" align="center" label="拨打结果">
          <template slot-scope="scope">
            <span>{{scope.row.callResult}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="客户标签">
          <template slot-scope="scope" >
            <el-tag :title="item" style="margin:3px" :key="index" v-for="(item,index) in scope.row.label.split(',')" type="success">
              {{item}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="关键信息">
          <template slot-scope="scope" style="text-align:left">
            <p v-if='!scope.row.item'>-</p>
            <div v-else>
              <p v-for=" tmp in scope.row.item.split('$') ">
                {{tmp}}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注">
          <template slot-scope="scope">
            <span>{{!!scope.row.remarks ? scope.row.remarks : '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column width="120" align="center" label="拨打时间">
          <template slot-scope="scope">
            <pre>{{ scope.row.callTime.split(' ').join('\n') }}</pre>
          </template>
        </el-table-column>
      </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" prev-text="上一页" next-text="下一页" @current-change="handleCurrentChange" :current-page.sync="listQuery.current"
                     :page-sizes="[10,20,30,50]" :page-size="listQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
  import { getCallList } from '@/api/dataStock'

  export default {
    name: "",
    data() {
      return {
        costomer:null,
        listLoading:false,
        listQuery: {
          current: 1,
          pagesize: 10,
          customerId:''
        },
        list:[],
        total:null
      }
    },
    created(){
      this.fetchData();
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route'(to,from){
        if(to.path === '/dataStock/details'){
          this.fetchData();
        }
      }
    },
    methods:{
      fetchData(){
        this.list = [];
        let thisUserInfo = JSON.parse(localStorage.getItem('AD_COUSTOMER'));
        this.costomer = thisUserInfo;
        this.listQuery.customerId = thisUserInfo.customerId;
        this.getList();
      },
      getList(){
        this.listLoading = true
        getCallList(this.listQuery).then(response => {
          const temp = response.data;
          this.total = temp.total;
          this.list = temp.info;
          this.listLoading = false;
        }).catch(res=>{
          this.listLoading = false
          this.$message.error(res)
        })
      },
      handleSizeChange(val) {
        this.listQuery.pagesize = val
        this.getList()
      },
      handleCurrentChange(val){
        this.listQuery.pagesize = val
        this.getList()
      },
      indexColor(index){
        return ['','success','warning','danger','info'][index > 5 ? index % 5 : index]
      },
      backBtn(){
        window.history.back();
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  @import 'src/styles/mixin.scss';
  .stockDetails {
    margin-bottom: 50px;
    .backBtn {
      @include f-right;
    }
    .info-item {
      margin: 25px 0px 15px 50px;
      > div {
        display: inline-block;
        min-width: 280px;
      }
      .tipText {
        display: inline-block;
        margin-right: 10px;
        min-width: 100px;
        text-align: right;
      }
    }
    .box-card {
      margin-bottom: 15px;
    }
    .textItem {
      margin: 10px 0px;
      width: 100%;
    }
  }
</style>
